// 通用配置
<template>
  <div class="auto_box">
    <div class="toggle_btn">
      <div class="toggles" @click="mainBtn">
        <router-link to="/auto/one" :class="{ aBth, bgColor }">主板和使能配置</router-link>
      </div>
      <div class="toggles" @click="elseBtn">
        <router-link to="/auto/two" :class="{ aBth, bgColor2 }">其他信息</router-link>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      aBth: 'aBth',
      bgColor: '',
      bgColor2: '',
    }
  },
  created() {
    const mainInfo = sessionStorage.getItem('mianUrl')
    if (mainInfo !== '#/auto/two') {
      return (this.bgColor = 'bgColor')
    } else {
      this.$router.push('/auto/two')
      this.bgColor2 = 'bgColor2'
    }
  },
  mounted() {},
  methods: {
    mainBtn() {
      this.bgColor2 = ''
      const main = window.location.hash
      sessionStorage.setItem('mianUrl', main)
      this.bgColor = 'bgColor'
    },
    elseBtn() {
      this.bgColor = ''
      const elseBtn = window.location.hash
      sessionStorage.setItem('mianUrl', elseBtn)
      this.bgColor2 = 'bgColor2'
    },
  },
  destroyed() {
    sessionStorage.setItem('mianUrl', '#/auto/one')
  },
}
</script>
<style lang="scss" scoped>
$bffffff: #fff;
$b2AA8E1: #2aa8e1;
$bdDCDFE6: #dcdfe6;
.auto_box {
  background-color: $bffffff;
  .toggle_btn {
    padding: 15px 15px 0 15px;
    .bgColor {
      color: $bffffff !important;
      background: $b2AA8E1 !important;
    }
    .bgColor2 {
      color: $bffffff !important;
      background: $b2AA8E1 !important;
    }
    .toggles {
      display: inline-block;
      width: 108px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      border: 1px solid $bdDCDFE6;
      cursor: pointer;
    }
    .toggles:nth-child(2) {
      border-left: none;
    }
    .aBth {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
}
</style>
